<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>事件类型示例</title>
    <style>
        .container {
            border: 2px solid black;
            padding: 20px;
            margin: 20px;
        }
        .box {
            border: 2px solid blue;
            padding: 20px;
            margin: 20px;
        }
        .button {
            border: 2px solid green;
            padding: 10px;
            margin: 10px;
            cursor: pointer;
        }
        .highlight {
            background-color: yellow;
        }
        .focus {
            border-color: red;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        容器
        <div class="box" id="box">
            盒子
            <button class="button" id="button">按钮</button>
            <input type="text" id="textInput" placeholder="输入内容">
        </div>
    </div>

    <script>
        // 页面加载事件
        window.addEventListener('load', function() {
            document.body.style.backgroundColor = 'lightgray';
            console.log('页面加载完成');
        });

        // 内容改变事件
        document.getElementById('textInput').addEventListener('input', function() {
            this.style.backgroundColor = 'lightblue';
            console.log('内容改变:', this.value);
        });

        // 鼠标悬浮事件
        document.getElementById('button').addEventListener('mouseover', function() {
            this.classList.add('highlight');
            console.log('鼠标悬浮在按钮上');
        });

        document.getElementById('button').addEventListener('mouseout', function() {
            this.classList.remove('highlight');
            console.log('鼠标离开按钮');
        });

        // 点击事件
        document.getElementById('button').addEventListener('click', function() {
            this.style.backgroundColor = 'lightgreen';
            console.log('按钮被点击');
            setTimeout(() => {
                this.style.backgroundColor = '';
            }, 500);
        });

        // 双击事件
        document.getElementById('button').addEventListener('dblclick', function() {
            this.style.backgroundColor = 'lightcoral';
            console.log('按钮被双击');
            setTimeout(() => {
                this.style.backgroundColor = '';
            }, 500);
        });

        // 键盘事件
        document.getElementById('textInput').addEventListener('keydown', function(event) {
            this.style.color = 'red';
            console.log('按下键:', event.key);
        });

        document.getElementById('textInput').addEventListener('keyup', function(event) {
            this.style.color = '';
            console.log('释放键:', event.key);
        });

        // 焦点事件
        document.getElementById('textInput').addEventListener('focus', function() {
            this.classList.add('focus');
            this.style.backgroundColor = 'lightblue'; // 保持与内容改变事件一致
            console.log('输入框获得焦点');
        });

        document.getElementById('textInput').addEventListener('blur', function() {
            this.classList.remove('focus');
            this.style.backgroundColor = ''; // 恢复默认背景颜色
            console.log('输入框失去焦点');
        });
    </script>
</body>
</html>
